flutterパフォーマンスプロファイリング

コンテンツ

こう言われています。速いアプリは素晴らしいです、しかし、スムーズアプリはさらに優れています。」アプリがスムーズにレンダリングされない場合は、どうやって直すのですか？どこから始めますか? このガイドでは、どこから始めればよいかを示します。実行すべき手順と役立つツール。

パフォーマンスの問題の診断

パフォーマンスの問題があるアプリを診断するには、次の機能を有効にしますパフォーマンスオーバーレイで UI とラスタースレッドを確認します。 (ラスタースレッドは、以前は GPU スレッドとして知られていました。) 始める前に、実行していることを確認してください。プロファイルモード、エミュレータを使用していないこと。最良の結果を得るには、最も遅いデバイスを選択するとよいでしょう。ユーザーが使用する可能性があります。

物理デバイスに接続する

Flutter アプリケーションのほぼすべてのパフォーマンスデバッグ物理的な Android または iOS デバイスで実行する必要があります。 Flutter アプリケーションが実行されている状態でプロファイルモード。デバッグモードの使用、またはシミュレーターでアプリを実行するまたはエミュレータは、通常、最終的なものを示すものではありません。リリースモードビルドの動作。パフォーマンスの確認を検討する必要がありますユーザーが合理的に使用する可能性がある最も遅いデバイス上で。

実際のデバイスで実行する必要がある理由:

シミュレータとエミュレータは同じハードウェアを使用しないため、パフォーマンス特性が異なります。一部の操作は異なります。シミュレータでは実際のデバイスよりも高速ですが、一部のデバイスでは低速になります。
デバッグモードでは、実行されない追加のチェック (アサートなど) が有効になりますプロファイルまたはリリースビルドに含まれており、これらのチェックにはコストがかかる可能性があります。
デバッグモードでは、リリースモードとは異なる方法でコードも実行されます。デバッグビルドは、Dart コードを「ジャストインタイム」(JIT) でコンパイルします。アプリは実行されますが、プロファイルとリリースのビルドはネイティブにプリコンパイルされますアプリが実行される前に指示 (「事前」または AOT とも呼ばれます) デバイスにロードされます。 JIT により、アプリが JIT のために一時停止する可能性がありますコンパイル自体がジャンクを引き起こす可能性があります。

プロファイルモードで実行する

Flutter のプロファイルモードはアプリケーションをコンパイルして起動しますリリースモードとほぼ同じですが、十分な追加機能が追加されていますパフォーマンスの問題をデバッグできる機能。たとえば、プロファイルモードは、トレース情報をプロファイリングツール。

次のようにプロファイルモードでアプリを起動します。

VS Code で、launch.jsonファイルを作成し、flutterMode財産をprofile(プロファイリングが完了したら、元に戻します)releaseまたdebug):
```
"configurations": [
  {
    "name": "Flutter",
    "request": "launch",
    "type": "dart",
    "flutterMode": "profile"
  }
]
```
Android Studio と IntelliJ では、実行 > Flutter main.dart をプロファイルモードで実行するメニュー項目。
コマンドラインから、--profile国旗：
```
$ flutter run --profile
```

さまざまなモードの詳細については、見るFlutterのビルドモード。

まず、DevTools を開いて表示します。パフォーマンスオーバーレイについては、次のセクションで説明します。

開発ツールを起動する

DevTools は、プロファイリング、ヒープの検査、コードカバレッジの表示、パフォーマンスオーバーレイの有効化、ステップバイステップのデバッガ。開発ツール」タイムラインビューを調査することができますフレームごとのアプリケーションの UI パフォーマンス。

アプリがプロファイルモードで実行されると、開発ツールを起動する。

パフォーマンスオーバーレイ

パフォーマンスオーバーレイには、統計が 2 つのグラフで表示されますアプリのどこに時間が費やされているかを示します。 UI の場合がジャンク (フレームをスキップ) している場合、これらのグラフはその理由を理解するのに役立ちます。グラフは実行中のアプリの上に表示されますが、そうではありません通常のウィジェットのように描画される - Flutter エンジン自体オーバーレイをペイントしますが、パフォーマンスへの影響は最小限に抑えられます。各グラフは、そのスレッドの最後の 300 フレームを表します。

このセクションでは、パフォーマンスオーバーレイを有効にする方法について説明します。これを使用して、アプリケーションのジャンクの原因を診断します。次のスクリーンショットは、実行中のパフォーマンスオーバーレイを示しています。 Flutter Gallery の例:

Screenshot of overlay showing zero jank
ラスタースレッドを示すパフォーマンスオーバーレイ (上)、および UI スレッド (下)。
緑色の縦棒現在のフレームを表します。

グラフの解釈

上のグラフ (「GPU」とマーク) は、ラスタースレッド、一番下のグラフは時間を示します UI スレッドによって消費されます。グラフ全体の白い線は 16 ミリ秒の増分を示しています縦軸に沿って。グラフが 1 を超えた場合これらの行のうち、60Hz 未満で実行していることになります。横軸はフレームを表します。グラフはアプリケーションがペイントするときにのみ更新されます。したがって、アイドル状態の場合、グラフは動きを停止します。

オーバーレイは常に次の場所で表示されます。プロファイルモード、以来デバッグモードパフォーマンスが意図的に犠牲にされている支援を目的とした高価なアサートと引き換えにしたがって、結果は誤解を招くものになります。

各フレームは 1/60 以内に作成して表示する必要があります。 1 秒 (約 16 ミリ秒)。この制限を超えるフレーム (どちらのグラフでも) 表示に失敗し、ジャンクが発生します。グラフの一方または両方に赤い垂直バーが表示されます。 UI グラフに赤いバーが表示される場合は、Dart コードが過大です高い。 GPUグラフに赤い縦棒が表示されている場合は、シーンが複雑すぎてすぐにレンダリングできません。

Screenshot of performance overlay showing jank with red bars
赤い垂直バーは、現在のフレームがレンダリングとペイントの両方にコストがかかります。
両方のグラフの場合赤く表示されたら、UI スレッドの診断から始めます。

flutterのスレッド

Flutter はその作業を行うために複数のスレッドを使用しますが、オーバーレイにはスレッドのうち 2 つだけが表示されます。 Dart コードはすべて UI スレッド上で実行されます。他のスレッドに直接アクセスすることはできませんが、 UI スレッドでのアクションはパフォーマンスに影響を与えます他のスレッドでも。

プラットフォームスレッド: プラットフォームのメインスレッド。プラグインコードはここで実行されます。詳細については、「UIキットiOS のドキュメント、またはメインスレッドAndroid のドキュメント。このスレッドはパフォーマンスオーバーレイには表示されません。
UIスレッド: UI スレッドは Dart VM で Dart コードを実行します。このスレッドには、あなたが書いたコードと、によって実行されたコードが含まれています。アプリに代わって Flutter のフレームワーク。アプリがシーンを作成して表示するとき、UI スレッドはあるレイヤーツリー、デバイスに依存しない軽量オブジェクトペイントコマンドを実行し、レイヤーツリーをラスタースレッドに送信して、デバイス上でレンダリングされます。このスレッドをブロックしないでください!パフォーマンスオーバーレイの一番下の行に表示されます。
ラスタースレッド(以前は GPU スレッドとして知られていました): ラスタースレッドはレイヤーツリーを取得して表示します。 GPU (グラフィックプロセッシングユニット) と通信することで実現します。ラスタースレッドやそのデータに直接アクセスすることはできませんが、このスレッドが遅い場合、それはあなたが何かをした結果ですダーツコードに。 Skia と Impeller のグラフィックスライブラリ、このスレッドで実行します。パフォーマンスオーバーレイの一番上の行に表示されます。このスレッドは、以前は「GPU スレッド」として知られていました。 GPU 用にラスタライズします。しかし、それは実行されていますCPU。多くの開発者が誤って名前を「ラスタースレッド」に変更しました。（でも当然のことですが）スレッドが GPU ユニット上で実行されると仮定します。
I/Oスレッド: 負荷の高いタスク (主に I/O) を実行します。それ以外の場合は、UI またはラスタースレッドのいずれかがブロックされます。このスレッドはパフォーマンスオーバーレイには表示されません。

詳細情報やビデオへのリンクについては、見るフレームワークのアーキテクチャでGitHub ウィキ、コミュニティ記事、レイヤーケーキ。

パフォーマンスオーバーレイの表示

次のようにパフォーマンスオーバーレイの表示を切り替えることができます。

flutterインスペクタの使用
コマンドラインから
プログラム的に

flutterインスペクタの使用

PerformanceOverlay ウィジェットを有効にする最も簡単な方法は次のとおりです。 Flutter インスペクターから入手できます。インスペクタービューの開発ツール。をクリックするだけですパフォーマンスオーバーレイオーバーレイを切り替えるボタン実行中のアプリで。

コマンドラインから

を使用してパフォーマンスオーバーレイを切り替えます。Pからのキーコマンドライン。

プログラム的に

オーバーレイをプログラムで有効にするには、次を参照してください。パフォーマンスオーバーレイのセクションFlutter アプリをプログラムでデバッグするページ。

UI グラフの問題の特定

UI グラフでパフォーマンスオーバーレイが赤で表示されている場合は、 GPU グラフであっても、Dart VM のプロファイリングから始めます。赤も表示されます。

GPU グラフの問題の特定

シーンによっては、簡単に構築できるレイヤーツリーが生成される場合があります。ただし、ラスタースレッドでレンダリングするにはコストがかかります。これが起こるとき、 UI グラフには赤が表示されませんが、GPU グラフには赤が表示されます。この場合、コードが何をしているのかを理解する必要がありますそれがコードのレンダリングを遅くする原因となっています。特定の種類のワークロード GPUにとってはより困難です。不要な電話がかかる可能性があるにsaveLayer、複数のオブジェクトと交差する不透明度、特定の状況でのクリップまたはシャドウ。

遅さの原因がアニメーション中にあると思われる場合は、クリックスローアニメーションFlutter インスペクタのボタンアニメーションを 5 倍遅くします。速度をさらに制御したい場合は、これを行うこともできますプログラム的に。

遅いのは最初のフレームですか、それともアニメーション全体ですか? アニメーション全体の場合、クリッピングが速度低下の原因となっていますか? もしかしたら、そうではないシーンを描く別の方法があるかもしれませんクリッピングを使用します。たとえば、不透明なコーナーを正方形にオーバーレイします。角丸長方形に切り取る代わりに。フェード、回転などの静止シーンの場合操作された、RepaintBoundary役立つかもしれません。

オフスクリーンレイヤーのチェック

のsaveLayerこの方法は、最も高価な方法の 1 つです。 Flutter フレームワーク。後処理を適用するときに便利ですただし、アプリの速度が低下する可能性があるため、次の場合は避けてください。それは必要ありません。電話しなくてもsaveLayer明示的に、あなたに代わって暗黙的な呼び出しが行われる可能性があります。かどうかを確認できますあなたのシーンが使用しているsaveLayerとともにPerformanceOverlayLayer.checkerboardOffscreenLayersスイッチ。

スイッチが有効になったら、アプリを実行して画像を探します点滅するボックスで囲まれています。ボックスがちらつきます新しいフレームがレンダリングされている場合、フレームからフレームへ。例えば、おそらく、レンダリングされた不透明度を持つオブジェクトのグループがあるでしょう。使用してsaveLayer。この場合、おそらく次の方がパフォーマンスが高くなります。親ではなく個々のウィジェットに不透明度を適用しますウィジェットツリーの上位にあるウィジェット。同じことが当てはまりますクリッピングやシャドウなど、コストがかかる可能性のあるその他の操作。

への電話に遭遇したときsaveLayer、次の質問を自分自身に問いかけてください。

アプリにはこのエフェクトが必要ですか?
これらの呼び出しを削除することはできますか?
同じ効果をグループではなく個々の要素に適用できますか?

キャッシュされていない画像の確認

画像をキャッシュするRepaintBoundaryいいね、意味があるとき。

最もコストのかかる操作の 1 つである、リソースの観点から見ると、画像ファイルを使用してテクスチャをレンダリングしています。まずは圧縮画像永続ストレージからフェッチされます。画像はホストメモリ (GPU メモリ) に解凍され、そしてデバイスのメモリ (RAM) に転送されます。

言い換えれば、画像 I/O は高価になる可能性があります。キャッシュは複雑な階層のスナップショットを提供します。後続のフレームでレンダリングするのが簡単になります。ラスターキャッシュエントリにはコストがかかるため、 GPU メモリを構築して負荷を消費し、絶対に必要な場合にのみイメージをキャッシュします。

を有効にすると、どの画像がキャッシュされているかを確認できます。PerformanceOverlayLayer.checkerboardRasterCacheImagesスイッチ。

アプリを実行し、ランダムな色でレンダリングされた画像を探します。チェッカーボードは、画像がキャッシュされていることを示します。シーンを操作すると、市松模様の画像が表示されます。一定のままにする必要があります。ちらつきは見たくないのですが、これは、キャッシュされた画像が再キャッシュされていることを示します。

ほとんどの場合、静止画像上にチェッカーボードを表示したいとします。ただし、非静的画像ではそうではありません。静止画像がキャッシュされていない場合は、に置くことでキャッシュできますRepaintBoundaryウィジェット。エンジンはまだ再塗装を無視するかもしれないが画像が十分複雑でないと判断した場合は、境界を設定します。

Flutter フレームワークは、作成が困難になるように設計されています。 60fps ではなくスムーズなアプリケーション。ジャンクがある場合、多くの場合、単純なバグが原因で、UI の多くが機能しなくなるためです。必要以上に各フレームを再構築しました。ウィジェット再構築プロファイラーこの種のパフォーマンス上の問題をデバッグおよび修正するのに役立ちますバグの。

現在の画面のウィジェットの再構築数を表示できます。 Android Studio および IntelliJ 用の Flutter プラグインのフレーム。これを行う方法の詳細については、「パフォーマンスデータを表示する

ベンチマーク

次のように記述することで、アプリのパフォーマンスを測定および追跡できます。ベンチマークテスト。 Flutter Driver ライブラリはサポートを提供しますベンチマーク用。この統合テストフレームワークを使用すると、以下を追跡するためのメトリクスを生成できます。

ジャンク
ダウンロードサイズ
バッテリー効率
起動時間

これらのベンチマークを追跡すると、次の時点で通知を受けることができます。パフォーマンスに悪影響を与える回帰が導入されます。

詳細については、を参照してください。結合テスト、のセクションFlutter アプリのテスト。

その他のリソース

次のリソースには、使用方法の詳細が記載されています。 Flutter のツールと Flutter でのデバッグ:

デバッグ
flutterインスペクター
flutter検査官の話、DartConf 2018 で発表
Flutter が Dart を使用する理由、ハッカーヌーンの記事
Flutter が Dart を使用する理由、Flutter チャンネルのビデオ
開発ツール: Dart および Flutter アプリ用のパフォーマンスツール
flutter APIドキュメント、特にPerformanceOverlayクラス、そしてそのダーツ:開発者パッケージ